<template>
  <div>
    <el-card class="box-card" style="margin-top: 2vh">
      <template #header>
        <div class="card-header">
          <span>发布公告</span>
        </div>
      </template>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="80px"
        class="login-form"
        label-position="top"
      >
        <el-form-item label="内容" prop="content">
          <el-input v-model="ruleForm.content" />
        </el-form-item>
        <el-form-item label="优先级" prop="order">
          <el-select v-model="ruleForm.order" class="m-2" placeholder="请选择至少一项分类" size="large">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-button id="submit-btn" type="primary" plain round @click="submitForm()">Submit</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import api from '../../api/data.js'
import { ElMessage } from 'element-plus'
export default {
  name: 'AdminNoticeadd',
  components: {
  },
  data () {
    let validateContent = (rule, value, callback) => {
      const reg = /^[a-zA-Z0-9\u4e00-\u9fa5]{1,100}$/
      if (value === '') {
        callback(new Error('请输入内容'))
      } else if (!reg.test(value)) {
        callback(new Error('内容过长或格式有误'))
      } else {
        callback()
      }
    }
    let validateCategory = (rule, value, callback) => {
      // const reg = /^[a-zA-Z0-9]{4,10}$/
      if (value === '') {
        callback(new Error('请选择分类'))
      } else {
        callback()
      }
    }
    return {
      options: [
        {
          label: '重要',
          value: 1
        },
        {
          label: '普通',
          value: 2
        },
      ],
      tags: [],
      ruleForm: {
        token: '',
        order: 2,
        content: '',
      },
      rules: {
        title: [
          { validator: validateContent, trigger: 'blur' }
        ],
        category: [
          { validator: validateCategory, trigger: 'blur' }
        ],
      }
  }},
  methods: {
    submitForm() {
      if (!this.$refs.ruleFormRef) return
      this.ruleForm.token = this.$store.state.token
      this.$refs.ruleFormRef.validate((valid) => {
        if (valid) {
          api.publishNotice(
            this.ruleForm
          ).then((res) => {
            if (res.code === 342) {
              this.$store.commit('logout')
              this.$store.commit('tokenError')
              this.$router.push({path: '/login'})
            } else if (res.code < 300) {
              ElMessage({
                message: res.message,
                type: 'success',
              })
              let temp = setInterval(() => {
                this.$router.push({path:'/admin/allNotice'})
                clearInterval(temp)
              }, 1500)
            } else {
              ElMessage.error(res.message)
            }
          })
        } else {
          ElMessage.error('error submit!')
          return false;
        }
      });
    },
  },
  mounted () {
    
  }
}
</script>

<style scoped>
.box-card {
  margin-left: 25vw;
  width: 50vw;
}
</style>
